<template>
	<div class="productList">
		<el-card shadow="hover">
			<div class="product-list-search mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="90px" class="demo-form-inline">
					<el-row>
						<el-col :span="6">
							<el-form-item prop="publishStatus" label="标签名称" style="width: 100%">
								<el-select v-model="searchForm.tagId" clearable style="width: 100%">
									<el-option label="全部" value=""></el-option>
									<el-option :label="item.tagName" :value="item.id" v-for="item in tagList" :key="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="keyword" label="关键词:" style="width: 100%">
								<el-input maxlength="200" v-model="searchForm.keyword" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="productCategoryId" label="分类" style="width: 100%">
								<CateSelector v-model="searchForm.productCategoryId" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item>
								<div style="padding-left: 15px">
									<el-button type="primary" @click="init">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" table-layout="auto" style="width: 100%" height="480" class="sku_table">
				<el-table-column type="index" label="序号" width="60">
					<template #default="scope">
						<span>{{ (ipage.current - 1) * ipage.pageSize + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="pic" label="商品图">
					<template #default="scope">
						<img width="60" :src="scope.row.pic" alt="" />
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
				<el-table-column prop="productId" label="商品ID" show-overflow-tooltip />
				<el-table-column prop="skuCode" label="自编SKU" width="90" show-overflow-tooltip />
				<el-table-column prop="externalSku" label="外部SKU" width="90" show-overflow-tooltip />
				<el-table-column prop="supplierSku" label="供应商SKU" width="100" show-overflow-tooltip />
				<el-table-column label="价格">
					<template #default="scope">
						<p v-show="scope.row.usPrice !== undefined && scope.row.usPrice !== null">${{ scope.row.usPrice }}</p>
						<p v-show="scope.row.ukPrice !== undefined && scope.row.ukPrice !== null">£{{ scope.row.ukPrice }}</p>
						<p v-show="scope.row.euPrice !== undefined && scope.row.euPrice !== null">€{{ scope.row.euPrice }}</p>
					</template>
				</el-table-column>
				<el-table-column label="自定义分类" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.productCategoryName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="上架状态">
					<template #default="scope">
						<span>{{ $filters.publishStatusFormat(scope.row.publishStatus) }}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="ipage.current"
				background
				v-model:page-size="ipage.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="ipage.total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>
<script setup name="ProductList">
import CateSelector from '/@/components/common/CateSelector.vue';
import { useInit, useWatchRoute } from './hook';

const route = useRoute();
const { init, searchForm, ipage, tableData, geiTagList, tagList } = useInit();

const formDataRef = ref();
function resetForm() {
	formDataRef.value.resetFields();
}

// 分页改变
const onHandleSizeChange = (val) => {
	ipage.value.pageSize = val;
	init();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	ipage.value.current = val;
	init();
};

// 页面加载时
onMounted(() => {
	init({ tagId: route.query.tagId });
	useWatchRoute(init);
	geiTagList();
});
</script>
<style lang="scss" scoped>
.price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.el-input-number {
		width: 100%;
	}
}
.right_btn {
	text-align: right;
}
.ml-4 {
	margin-left: 15px;
}
.center {
	text-align: center;
}
.el-link {
	margin-right: 8px;
}
</style>
